<%--
  Created by IntelliJ IDEA.
  User: 86180
  Date: 2021/2/4
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html class="app-ui">

<head>
    <!-- Meta -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

    <!-- Document title -->
    <title>订单详情</title>

    <meta name="description" content="AppUI - Frontend Template & UI Framework" />
    <meta name="robots" content="noindex, nofollow" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="${pageContext.request.contextPath}/assets/img/favicons/apple-touch-icon.png" />
    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/favicons/favicon.ico" />

    <!-- AppUI CSS stylesheets -->
    <link rel="stylesheet" id="css-font-awesome" href="${pageContext.request.contextPath}/assets/css/font-awesome.css" />
    <link rel="stylesheet" id="css-ionicons" href="${pageContext.request.contextPath}/assets/css/ionicons.css" />
    <link rel="stylesheet" id="css-bootstrap" href="${pageContext.request.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" id="css-app" href="${pageContext.request.contextPath}/assets/css/app.css" />
    <link rel="stylesheet" id="css-app-custom" href="${pageContext.request.contextPath}/assets/css/app-custom.css" />
    <!-- End Stylesheets -->
</head>
<body class="app-ui layout-has-fixed-header">
<div class="app-layout-canvas">
    <div class="app-layout-container">

        <!-- Header -->
        <header class="app-layout-header">
            <nav class="navbar navbar-default col-lg-offset-1">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
                                aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
                            <span class="sr-only">Toggle drawer</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:void(0)">
                            <img class="img-responsive" src="${pageContext.request.contextPath}/assets/img/logo/logo-frontend.png" title="强强组合商城" alt="AppUI" />
                        </a>
                    </div>

                    <div class="collapse navbar-collapse" id="header-navbar-collapse">
                        <ul id="main-menu" class="nav navbar-nav navbar-left">

                            <li class="active">
                                <a href="${pageContext.request.contextPath}/jsp/home/frontend_home.jsp">首页</a>
                            </li>

                            <li>
                                <a href="frontend_about.html">关于</a>
                            </li>

                            <li>
                                <a href="frontend_pricing.html">Pricing</a>
                            </li>

                            <li>
                                <a href="frontend_team.html">Team</a>
                            </li>

                            <li class="dropdown">
                                <a href="#" data-toggle="dropdown">分类 <span class="caret"></span></a>
                                <ul class="dropdown-menu">

                                    <li>
                                        <a href="frontend_search.html">Search</a>
                                    </li>

                                    <li>
                                        <a href="frontend_support.html">Support</a>
                                    </li>

                                    <li>
                                        <a href="frontend_contact.html">Contact</a>
                                    </li>

                                    <li>
                                        <a href="frontend_login_signup.html">Login / Signup</a>
                                    </li>

                                    <li>
                                        <a href="frontend_400.html">Error 400</a>
                                    </li>

                                </ul>
                            </li>

                        </ul>
                        <!-- .navbar-left -->

                        <ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs w-30">
                            <li class="active" id="business">
                                <a href="frontend_home.html">注册为商家</a>
                            </li>
                            <li class="active" id="deliver">
                                <a href="frontend_home.html">注册为配送员</a>
                            </li>
                            <li class="dropdown">
                                <a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="dropdown-header">消息</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> 有无内鬼？ </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> 不过如此 </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li class="dropdown-header">公告</li>
                                    <li>
                                        <a tabindex="-1" href="javascript:void(0)">登dua郎..</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">
                                    <span class="m-r-sm">${account.accName}<span class="caret"></span></span>
                                    <img class="img-avatar img-avatar-48" src="${pageContext.request.contextPath}/file/acc/${account.accImg == null?"000000011612245316757212.png":account.accImg}" alt="User profile pic" />
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li>
                                        <a href="base_pages_profile.html">个人账户</a>
                                    </li>
                                    <li>
                                        <a href="#" id="logout">退出</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <!-- .navbar-right -->
                    </div>
                </div>
                <!-- .container-fluid -->
            </nav>
            <!-- .navbar -->
        </header>
        <br />
        <br />
        <br />
        <!-- End header -->
        <main class="app-layout-canvas">

            <!-- Page Content -->
            <div class="container-fluid p-y-md">
                <!-- Checkable Table (.js-table-checkable class is initialized in App() -> uiHelperTableToolsCheckable()) -->
                <div class="card col-md-8 col-md-offset-2">
                    <div class="card-header">
                        <h4>收获地址</h4>
                        <div class="card-actions">
                            <button class="btn btn-app-orange" type="button" data-toggle="tooltip" title="改默认地址" id="editReAddress"><span>更改收获地址&nbsp;&nbsp;&nbsp;</span><i
                                    class="ion-edit"></i></button>
                        </div>
                    </div>
                    <div class="card-block">
                        <!-- If you put a checkbox in thead section, it will automatically toggle all tbody section checkboxes -->
                        <table class="table table-vcenter table-hover">
                            <thead>
                            <tr>
                                <th class="text-center w-5">
                                    <label class="css-input css-checkbox css-checkbox-default m-t-0 m-b-0">
                                        <span></span>
                                    </label>
                                </th>
                                <th>地址信息</th>
                                <th class="hidden-xs w-20">签收人</th>
                                <th class="hidden-xs w-20">电话</th>
                                <th class="hidden-xs w-10"></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="text-center">
                                    <label class="css-input css-checkbox css-checkbox-default">
                                        <span></span>
                                    </label>
                                </td>
                                <td>
                                    <p class="font-500 m-b-0"><span id="reAddressInfo">江西省南昌市青山湖区</span></p>
                                </td>
                                <td class="hidden-xs"><span id="Name">聂仔</span></td>
                                <td class="hidden-xs">
                                    <em class="text-muted"><span id="telephone">1814615465</span></em>
                                </td>
                                <td class="hidden-xs">
                                    <em class="text-muted" id="idDefault">

                                    </em>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- .card-block -->
                </div>

                <div class="card col-md-8 col-md-offset-2">
                    <div class="card-block" id="orderDetailInfo">
                        <!-- If you put a checkbox in thead section, it will automatically toggle all tbody section checkboxes -->
                        <table class="table-vcenter table-hover">
                            <tbody>
                            <tr>
                                <td class="text-center w-20">
                                    <label class="css-input css-checkbox css-checkbox-default">
                                        <div class="card m-b-0">
                                            <img class="img-responsive" src="${pageContext.request.contextPath}/assets/img/misc/frontend_about3.png" style="width: 130px;height: 100px;"
                                                 alt="User profile pic" />
                                        </div>
                                    </label>
                                </td>
                                <td class="hidden-xs w-20">
                                    <p class="font-500 m-b-0"><span>iPhone 9999x</span></p>
                                    <p class="hidden-xs"><span>买到就是赚到！！！最新残次品，逼真仿造</span></p>
                                </td>
                                <td class="font-500" style="padding-left: 50px;">单价：<span>￥999.99</span></td>
                                <td class="hidden-xs">
                                    数量：<input type="number" value="1" style="width: 40px;"/>
                                </td>
                                <td class="hidden-xs font-500">
                                    总额：<span>999.99元</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <table class="table-vcenter table-hover">
                            <tbody>
                            <tr>
                                <td class="text-center w-20">
                                    <label class="css-input css-checkbox css-checkbox-default">
                                        <div class="card m-b-0">
                                            <img class="img-responsive" src="${pageContext.request.contextPath}/assets/img/misc/frontend_about3.png" style="width: 130px;height: 100px;"
                                                 alt="User profile pic" />
                                        </div>
                                    </label>
                                </td>
                                <td class="hidden-xs w-20">
                                    <p class="font-500 m-b-0"><span>iPhone 9999x</span></p>
                                    <p class="hidden-xs"><span>买到就是赚到！！！最新残次品，逼真仿造</span></p>
                                </td>
                                <td class="font-500" style="padding-left: 50px;">单价：<span>￥999.99</span></td>
                                <td class="hidden-xs">
                                    数量：<input type="number" value="1" style="width: 40px;" />
                                </td>
                                <td class="hidden-xs font-500">
                                    总额：<span>999.99元</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- .card-block -->

                </div>
                <!-- .card -->
                <!-- End Checkable Table -->
                <div class="col-lg-12 text-center">
                    <button class="btn btn-success" style="width: 150px;height: 50px;" type="button" title="提交订单"
                            data-toggle="modal" data-target="#myModal" id="submitOrder"><span>提交订单</span></button>
                    <button class="btn btn-app-orange" style="margin-left: 30px; width: 150px;height: 50px;" type="button" title="取消订单"
                            data-toggle="modal" data-target="#doCancelOrder"><span>取消</span></button>
                </div>
            </div>
            <!-- .container-fluid -->
        <!-- End Page Content -->

        </main>



        <footer class="app-layout-footer">
            <!-- .section -->

            <div class="section p-y-xl bg-app bg-inverse">
                <div class="container text-center">
                    <!-- .row -->
                    <div class="row p-t-md p-b-lg">
                        <div class="col-md-10 col-md-offset-1">
                        </div>
                    </div>
                    <!-- .row -->
                </div>
                <!-- .container -->
            </div>
            <!-- .section -->
        </footer>

    </div>
    <!-- .app-layout-container -->
</div>

<!-- 模态框（Modal）start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">提交订单</h5>
            </div>
            <div class="modal-body" style="text-align: center;margin: 0 auto;">
                <p style="font-size: 15px; text-align: center;margin: 0 auto;"><strong>商品费总额：￥<span id="goodTotalPri">39</span></strong></p>
                <p style="font-size: 15px; text-align: center;margin: 0 auto;"><strong>配送费总额：￥<span id="shipTotalPri">61</span></strong></p>
                <p style="font-size: 25px; text-align: center;margin: 0 auto;font-family: 华文楷体;"><strong>支付总额：￥<span id="playTotal">100</span></strong></p>
            </div>

            <div class="modal-footer">
                <div class="btn-group" role="group" style="padding-right: 100px;">
                    <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#ModalTest" data-dismiss="modal"
                            style="width: 90px;" id="deleteHaulBtn">确认</button>
                </div>
                <div class="btn-group" role="group" style="margin-right: 120px;">
                    <button type="button" class="btn btn-default " style="width: 90px;" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="ModalTest" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" data-backdrop="static" style="width: 200px; margin: 0 auto;">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" style="margin: 0 auto;font-family: 华文楷体;">输入支付密码</h5>
            </div>
            <div class="modal-body" style="margin: 0 auto;font-family: 华文楷体;">
                <input type="password" name="Password" id="playPwd" />
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="doCancelOrder" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">取消订单</h5>
            </div>
            <div class="modal-body" style="text-align: center;margin: 0 auto;">
                <p style="font-size: 15px; text-align: center;margin: 0 auto;"><strong>您确定取消订单吗？</strong></p>
            </div>

            <div class="modal-footer">
                <div class="btn-group" role="group" style="padding-right: 100px;">
                    <button type="button" class="btn btn-primary " data-toggle="modal"
                            style="width: 90px;" id="sureCancel">确认</button>
                </div>
                <div class="btn-group" role="group" style="margin-right: 120px;">
                    <button type="button" class="btn btn-default " style="width: 90px;" data-dismiss="modal">取消</button>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal）end -->
<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.scrollLock.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.placeholder.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/app-custom.js"></script>

<!-- Page JS Code -->
<script type="text/javascript">
    $(function() {
        var accId = ${account.accId};
        var ordId = ${param.ordId};
        var inPwdNum = 0;//控制密码输入的次数
        getOrderInfo();//获取订单信息
        getDefaultReAddressInfo();//获取默认收获地址
        function getOrderInfo() {
            var url = "${pageContext.request.contextPath}/sureOrder/selectOrderDetail";
            var param = {
                ordId:ordId
            }
            $.get(url,param,function (data) {
                if (data.code == 1001){
                    $("#orderDetailInfo").html("");
                    var content = "";
                    for (var i = 0; i < data.orderDetailAndGoods.length; i++) {
                        content += "<table class='table-vcenter table-hover'>";
                        content += "<tbody><tr><td class='text-center w-20'><label class='css-input css-checkbox css-checkbox-default'><div class='card m-b-0'>";
                        content += "<img class='img-responsive' src='${pageContext.request.contextPath}/file/goodsInfo/"+data.orderDetailAndGoods[i].goods.imgUrl+"' style='width: 130px;height: 100px;' alt='User profile pic' />";
                        content += "</div></label></td><td class='hidden-xs w-20'>";
                        content += "<p class='font-500 m-b-0'>"+data.orderDetailAndGoods[i].goods.goNm+"</p>";
                        content += "<p class='hidden-xs'>"+data.orderDetailAndGoods[i].goods.goDp+"</p></td>";
                        content += "<td class='font-500' style='padding-left: 50px;' >单价：￥<span  class='goPri"+i+"'>"+data.orderDetailAndGoods[i].goods.goPri+"</span></td>";
                        content += "<td class='hidden-xs w-15'>";
                        content += "数量：<input type='number' value='"+data.orderDetailAndGoods[i].orderDetail.goNum+"' style='width: 40px;' class='asd' detIds='"+data.orderDetailAndGoods[i].orderDetail.detId+"' />";
                        content += "</td><td class='hidden-xs font-500 w-20'>";
                        content += "总额：￥"+data.orderDetailAndGoods[i].orderDetail.totalPrice+"";
                        content += "</td></tr></tbody></table>";
                    }
                    $("#orderDetailInfo").html(content);
                }
            });
        }
        /*  获取指定，或者默认收获地址    */
        function getDefaultReAddressInfo() {
            var url = "${pageContext.request.contextPath}/accountInfo/selectDefaultReceiveAddressByAccId";
            var param = {
                ordId:ordId
            };
            $.get(url,param,function (data) {
                if (data.code == 1001){
                    $("#reAddressInfo").html(data.defaultReceiveAddress.reAddress);
                    $("#Name").html(data.defaultReceiveAddress.reLinkman);
                    $("#telephone").html(data.defaultReceiveAddress.reTelephone);
                    if (data.defaultReceiveAddress.reDefaultAddress == 1){
                        $("#idDefault").html("<code style='font-family: 华文楷体;font-size: 20px;'>默认</code>")
                    }
                }else {
                    alert("错误代码：100000000001");
                }
            });
        }
        /*  修改购买数量 */
        $("#orderDetailInfo").delegate(".asd","change",function () {
            if ($(this).val() <= 0){
                $(this).val(1);
                return false;
            }
            var goNum = $(this).val();
            var detId = $(this).attr("detIds");
            var url = "${pageContext.request.contextPath}/sureOrder/editOrderGoNum";
            var param = {
                detId:detId,
                goNum:goNum,
                _method: "put"
            };
            $.post(url, param, function (data) {
                if (data.code == 1001){
                    console.log("edit success");
                    getOrderInfo();
                }
            });

        });
        $("#sureCancel").click(function () {
            var url = "${pageContext.request.contextPath}/sureOrder/cancelOrder";
            var param = {
                ordId:ordId,
                _method:"delete"
            };
            $.post(url,param,function (data) {
                if (data.code == 1001){
                    alert("取消订单成功！");
                    window.location.href = "${pageContext.request.contextPath}/jsp/home/frontend_home.jsp";
                }
            });
        });

        /*  提交订单    */
        $("#submitOrder").click(function () {
            getOrderTotalPrice();//获取订单总价
        });
        function getOrderTotalPrice() {
            var url = "${pageContext.request.contextPath}/sureOrder/submitOrder";
            var param = {
                ordId:ordId
            }
            $.get(url,param,function (data) {
                if (data.code == 1001){
                    $("#playTotal").html(data.orderTotalPrice.ordTotalPrice + data.orderTotalPrice.shipTotalPrice);
                    $("#goodTotalPri").html(data.orderTotalPrice.ordTotalPrice);
                    $("#shipTotalPri").html(data.orderTotalPrice.shipTotalPrice);
                }
            })
        }

        /*  支付输入密码  */
        $("#playPwd").keyup(function (){
            var value = $(this).val();

            if (value.length == 3){
                var url = "${pageContext.request.contextPath}/sureOrder/payOrder";
                var param = {
                    ordId: ordId,
                    accId:accId,
                    accPwd:value,
                    _method: "put"
                };
                $.post(url, param, function (data) {
                    if (data.code == 1001) {
                        alert("支付成功！");
                        window.location.href = "${pageContext.request.contextPath}/jsp/home/frontend_home.jsp";
                    } else {
                        alert("密码错误，错误密码不能超过三次");
                        inPwdNum = inPwdNum+1;
                        if (inPwdNum >2){
                            alert("支付失败！");
                            $("#ModalTest").modal('hide');
                        }
                    }
                });
            }
        });
        /*  更改收获地址 --start */
        $("#editReAddress").click(function () {
            window.location.href = "${pageContext.request.contextPath}/jsp/MyAccount/show_receiveaddress.jsp?ordId="+ordId;
        });
        /*  更改收获地址 --end */
        /*动态显示首页头部*/
        var role = ${account.role};
        if(role == 2){
            $("#business").html("<a href='../business/UnFinishOrder.jsp'>商家后台</a>");
            $("#deliver").html("");
        }
        if(role == 3){
            $("#business").html("");
            $("#deliver").html("<a href='#'>配送员后台</a>");
        }

        //模态框居中问题 start
        function centerModals() {
            $('.modal').each(function(i) {
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 50 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top - 50);
            });
        }
        // 在模态框出现的时候调用垂直居中方法
        $('.modal').on('show.bs.modal', centerModals);
        // 在窗口大小改变的时候调用垂直居中方法
        $(window).on('resize', centerModals);
        //模态框居中问题end
    });
</script>
</body>
</html>
